<template>
  <div class="container">
    <div class="top_div clear">
      <div class="go_center_btn">
        <a href="/index.html#/user/project" size="medium" class="el-icon-s-home"></a>
      </div>
      <!--后面改成直接让用户自己设置-->
      <div class="big_title" v-if="userinfo.member_id == 297 || userinfo.member_id == 299">
        城乡安全用电管理平台
      </div>
      <div class="big_title" v-else>
        {{ userinfo.nick_dltitle }} - 智慧电气火灾预警系统
      </div>
    </div>
    <div class="body_content row">
      <div class="left col_35">
        <!-- 当前设备状态分析 -->
        <div class="equ_code item_div clear">
          <div class="title">
            <img src="/public/usermg/img/u47.png" alt="" />
            <span>当前设备状态分析</span>
          </div>
          <!--数据来自js-->
          <div class="red_title">
            <span class="circle b-green"></span>
            <span>正常设备</span>
            <span class="val" id="zhengchang_val"
              >{{ zhengchangshebeishu }}%</span
            >
          </div>
          <div class="blue_title">
            <span class="circle b-red"></span>
            <span>报警设备</span>
            <span class="val" id="baojing_val">{{ baojingshebeishu }}%</span>
          </div>
          <div id="equ_code_item" class="equ_code_item"></div>
          <div class="use_power">
            <div class="">
              <div class="text-center">昨天报警数</div>
              <div
                class="text-center color_20fdfa fs_18px bor_b_das_103083"
                style="height: 30px;"
              >
                {{ alarmnearnum.yesdaynum }}
              </div>
            </div>

            <div class="">
              <div class="text-center">今天报警数</div>
              <div
                class="text-center color_20fdfa fs_18px bor_b_das_103083"
                style="height: 30px;"
              >
                {{ alarmnearnum.todaynum }}
              </div>
            </div>

            <div class="">
              <div class="text-center">报警待处理设备数</div>
              <div
                class="text-center color_20fdfa fs_18px bor_b_das_103083"
                style="height: 30px;"
              >
                <a
                  href="#"
                  class="color_20fdfa"
                  onclick="target_iFrame('/devices/index.html','报警待处理设备',5)"
                >
                  {{ alarmnearnum.alarmnum }}
                </a>
              </div>
            </div>
          </div>
        </div>
        <!-- 用电 -->

        <div class="equ_code item_div clear">
          <div class="title">
            <img src="/public/ceoadmin/img/u47.png" alt="" />
            <span>用电汇总</span>
          </div>

          <div class="use_power">
            <div class="">
              <div class="text-center">累计用电</div>
              <div
                class="text-center color_20fdfa fs_18px bor_b_das_103083"
                style="height: 30px;"
              >
                {{ sumtotal }}kwh
              </div>
            </div>

            <div class="">
              <div class="text-center">上月累计用电</div>
              <div
                class="text-center color_20fdfa fs_18px bor_b_das_103083"
                style="height: 30px;"
              >
                {{ monthTotal }}kwh
              </div>
            </div>

            <div class="">
              <div class="text-center">当天累计用电</div>
              <div
                class="text-center color_20fdfa fs_18px bor_b_das_103083"
                style="height: 30px;"
              >
                {{ dayTotal }}kwh
              </div>
            </div>
          </div>
        </div>
        <!-- 报警趋势 -->
        <div class="alarm_trend item_div">
          <div class="title">
            <img src="/public/usermg/img/u47.png" />
            <span>报警趋势</span>
          </div>
          <div id="alarm_trend_chart" class="alarm_trend_chart"></div>
        </div>
      </div>
      <div class="center col_5">
        <div class="map_center item_div">
          <div id="china-map" style="height: 100%;"></div>
        </div>
        <!-- 实时报警列表 -->
        <div class="real_fault_data item_div">
          <div class="title">
            <img src="/public/usermg/img/u47.png" alt="" />
            <span>实时报警列表</span>
          </div>
          <div class="form_data">
            <table
              class="table table-condensed"
              style="text-align: center; width: 100%;"
            >
              <thead>
                <tr>
                  <th>编号</th>
                  <th>设备名称</th>
                  <th>设备ID</th>
                  <th>设备地点</th>
                  <th>故障类型</th>
                  <th>分路</th>
                  <th>故障时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in alarminfo" :key="index">
                  <td>{{ item.id }}</td>
                  <td>{{ item.title }}</td>
                  <td>{{ item.deviceid }}</td>
                  <td :title="item.address">
                    {{ item.address2 ? item.address2 : '-' }}
                  </td>
                  <td>{{ errortypeArr[item.error] }}</td>
                  <td>{{ item.ln2 }}</td>
                  <td>{{ formatTime(item.updatetime) }}</td>
                  <!--时间要转换一下-->
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pages">
            <a href="/index.html#/equipment/fault"> 查看更多</a>
          </div>
        </div>
      </div>
      <div class="right col_35">
        <!-- 项目，设备数量统计 -->
        <div class="mon_data item_div">
          <div class="title">
            <img src="/public/usermg/img/u47.png" alt="" />
            <span>项目，设备数量统计</span>
          </div>
          <div class="measure_class">
            <div class="">
              <div class="text-center">设备数量</div>
              <div
                class="text-center color_20fdfa fs_18px mt_10px pb_5px bor_b_das_103083"
              >
                {{ devices }}
              </div>
            </div>
            <div class="">
              <div class="text-center">在线数</div>
              <div
                class="text-center color_20fdfa fs_18px mt_10px pb_5px bor_b_das_103083"
              >
                {{ devicesOnline }}
              </div>
            </div>
            <div class="">
              <div class="text-center">离线数</div>
              <div
                class="text-center color_20fdfa fs_18px mt_10px pb_5px bor_b_das_103083"
              >
                {{ devices - devicesOnline }}
              </div>
            </div>
            <div class="">
              <div class="text-center">昨天新增</div>
              <div
                class="text-center color_20fdfa fs_18px mt_10px pb_5px bor_b_das_103083"
              >
                {{ deviceyesday }}
              </div>
            </div>
          </div>
          <div class="data_table">
            <table
              class="table table-condensed table_outer_frame"
              style="text-align: left; width: 100%;"
            >
              <thead>
                <tr>
                  <th style="width: 35%;">项目名称</th>
                  <th style="width: 35%;">项目公司</th>
                  <th style="width: 30%;">代理商及联系人</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in projectArr" :key="index">
                  <td>{{ item.username }}</td>
                  <td>
                    {{ item.project_company ? item.project_company : '-' }}
                  </td>
                  <td>{{ item.nick_name ? item.nick_name : '-' }}</td>
                </tr>
              </tbody>
            </table>
            <div class="pages">
              <a href="/index.html#/user/project"> 查看更多</a>
            </div>
          </div>
        </div>
        <!-- 报警类型分析 -->
        <div class="equ_code item_div">
          <div class="title">
            <img src="/public/usermg/img/u47.png" alt="" />
            <span>报警类型分析</span>
          </div>
          <div id="fault_type_chart2" class="fault_type_chart"></div>
        </div>
      </div>
    </div>
    <!--<div class="el-icon-arrow-down"></div>-->

    <el-dialog
      :visible.sync="showwarning"
      title="异常设备 - 报警信息"
      width="80%"
    >
      <el-table :data="dataList">
        <el-table-column label="设备ID" prop="deviceid"></el-table-column>
        <el-table-column label="分路名称" prop="title"></el-table-column>
        <el-table-column label="故障类型" prop="alarm_erro">
          <template slot-scope="scope">
            {{ fauult_errortype[scope.row.alarm_erro] }}
          </template>
        </el-table-column>
        <el-table-column label="解决方案">
          <template slot-scope="scope">
            <el-button
              type="warning"
              @click="openSolution(scope.row.alarm_erro)"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="故障时间" prop="create_at"></el-table-column>
        <el-table-column label="标记状态" prop="deviceid">
          <template slot-scope="scope">
            <el-button
              type="default"
              @click="updateAlarmStatus(scope.row.deviceid, scope.row.lnid)"
              >已解决？</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button type="primary" @click="showwarning = false"
          ><a href="/index.html#/equipment/fault">查看更多</a></el-button
        >
        <el-button @click="showwarning = false">返回</el-button>
      </span>
    </el-dialog>

    <el-dialog title="解决方案" :visible.sync="showSolution">
      {{ solution[this.curErrno] ? solution[this.curErrno] : '无' }}
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request';
import echarts from 'echarts';
import china from 'echarts/map/json/china.json';
echarts.registerMap('china', china);
import moment from 'moment';
import { getUserInfo } from '@/api/login.js';

export default {
  data() {
    return {
      devicesAreaData: '',
      projectCount: '',
      projectArr: '',
      deviceday: '',
      deviceyesday: '',
      alarminfo: '',
      alarm_info_data: '',
      errortypeArr: '',
      fault_chart2_data: '',
      fauult_errortype: '',
      fauult_type: '',
      devicesOnline: '',
      devices: '',
      alarminfoCount_devices: '',
      alarminfoCount: '',
      solution: '',
      monthTotal: '',
      dayTotal: '',
      sumtotal: '',
      alarmnearnum: '',

      zhengchangshebeishu: '',
      baojingshebeishu: '',

      showwarning: false,
      showSolution: false,
      curErrno: '',
      dataList: [],

      userinfo: {},
    };
  },
  mounted() {
    document.body.style.background = 'rgba(0, 0, 59, 1)';
  },
  destroyed() {
    document.body.style.background = 'white';
  },
  created() {
    return;
    this.deviceAndProjectNum();
    this.project();
    this.useTotal();
    this.drawAlarmTrend();
    this.drawPie();
    this.drawMap();
    this.drawAlarmTypeAndLayer();
    this.realtimeAlarm();
    this.getUserInfo();
    setInterval(()=>{
      this.realtimeAlarm()
      this.alarmInfoRealTime()
      //this.drawAlarmTypeAndLayer()
    },5000)
  },
  methods: {
    getUserInfo() {
      getUserInfo().then((res) => {
        //console.log("用户信息",res)
        this.userinfo = res.data;
      });
    },
    updateAlarmStatus(deviceid, lnid) {
      let data = { deviceid, lnid };
      request({
        url: '/subdevices/updateAlarmStauts',
        method: 'post',
        data,
      }).then((res) => {
        this.drawAlarmTypeAndLayer();
        this.$message.success('更新成功');
      });
    },
    openSolution(errno) {
      this.curErrno = errno;
      this.showSolution = true;
    },
    formatTime(time) {
      return moment(time * 1000).format('YYYY-MM-DD HH:mm:ss');
    },
    drawAlarmTrend() {
      request({
        url: '/miniapp/ajaxAlarmNum',
        method: 'get',
      }).then((res) => {
        this.alarmnearnum = res.alarmnearnum;
        this.alarminfoCount = res.alarminfoCount;

        // 报警趋势
        // 折线图参数
        let seven_title_name = [];
        for (let k = 0; k < 7; k++) {
          let newD = new Date().setDate(new Date().getDate() - k);
          newD = new Date(newD);
          seven_title_name.unshift(newD.getMonth() + 1 + '/' + newD.getDate());
        }
        let alarm_trend_chart_option = {
          backgroundColor: '#00003b',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          grid: {
            left: '5',
            right: '20',
            top: '25',
            bottom: '10',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: seven_title_name,
            axisLabel: {
              interval: 0, //强制文字产生间隔
              rotate: 45, //文字逆时针旋转45°
            },
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: JSON.parse(this.alarminfoCount),
              type: 'line',
              areaStyle: {},
              smooth: true,
            },
          ],
        };
        // 画折线图
        this.$nextTick(() => {
          echarts
            .init(document.getElementById('alarm_trend_chart'), 'dark')
            .setOption(alarm_trend_chart_option);
        });
      });
    },
    drawPie() {
      request({
        url: '/miniapp/ajaxpie',
        method: 'get',
      }).then((res) => {
        this.devicesOnline = res.devicesOnline;
        this.alarminfoCount_devices = res.alarminfoCount_devices;

        let baojingshebeishu =
          this.devicesOnline == 0
            ? 0
            : (
                (this.alarminfoCount_devices /
                  (this.devicesOnline + this.alarminfoCount_devices)) *
                100
              ).toFixed(2);
        let zhengchangshebeishu = (100 - baojingshebeishu).toFixed(2);
        this.zhengchangshebeishu = zhengchangshebeishu;
        this.baojingshebeishu = baojingshebeishu;

        //$('#zhengchang_val').text(zhengchangshebeishu + '%');
        //$('#baojing_val').text(baojingshebeishu + '%');
        // $('.top_div .big_title').click(() => {
        //   window.location.href = '/index/index.html';
        // });
        // $('.go_center_btn').click(() => {
        //   // 跳转页面
        //   window.location.href = '/index/index.html';
        // });

        // 当前设备状态分析
        let equ_code_data = [
          { name: '正常设备', value: zhengchangshebeishu },
          { name: '报警设备', value: baojingshebeishu },
        ];
        // 饼图参数
        let equ_code_option = {
          backgroundColor: '#00003b',
          title: {
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}({d}%)',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: [],
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '72%',
              label: {
                normal: {
                  position: 'inner',
                  show: false,
                },
              },
              center: ['50%', '50%'],
              data: equ_code_data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
          color: ['#00bd8d', '#e6374d'],
        };

        //画饼状图
        this.$nextTick(() => {
          echarts
            .init(document.getElementById('equ_code_item'), 'dark')
            .setOption(equ_code_option);
        });
      });
    },
    drawMap() {
      request({
        url: '/miniapp/ajaxmap',
        method: 'get',
      }).then((res) => {
        let that = this;
        this.devicesAreaData = res.devicesAreaData;
        // 地图
        var myChart2 = echarts.init(document.getElementById('china-map'));
        //console.log(myChart,'myChart')
        //let zoom = $('#china-map').width() <= 501 ? 0.8 : 1; //地图缩放
        let zoom =
          document.getElementById('china-map').clientWidth < 501 ? 0.8 : 1;

        const seriesData = JSON.parse(this.devicesAreaData);
        initEcharts('china', ' ');
        // 初始化echarts
        function initEcharts(pName, Chinese_) {
          var tmpSeriesData = pName === 'china' ? seriesData : [];
          var option = {
            title: {
              text: '全国设备分布图',
              left: 'center',
              textStyle: { color: 'white', fontWeight: 'normal' },
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c} (个)',
            },
            visualMap: {
              min: 0,
              max: 200,
              calculable: false,
              inRange: {
                color: [
                  '#313695',
                  '#4575b4',
                  '#74add1',
                  '#abd9e9',
                  '#e0f3f8',
                  '#ffffbf',
                  '#fee090',
                  '#fdae61',
                  '#f46d43',
                  '#d73027',
                  '#a50026',
                ],
              },
              // 文本，默认为数值文本
              text: ['High', 'Low'],
              show: false,
            },
            series: [
              {
                name: Chinese_ || pName,
                type: 'map',
                mapType: pName,
                //是否开启鼠标缩放和平移漫游
                roam: false,
                data: tmpSeriesData,
                //组件距离容器的距离
                top: 'middle',
                width: 'calc(100% - 0px)',
                selectedMode: 'single',
                label: {
                  normal: {
                    //显示省份标签
                    show: true,
                    //省份标签字体颜色
                    textStyle: { color: '#fbfdfe' },
                  },
                  emphasis: {
                    //对应的鼠标悬浮效果
                    show: true,
                    textStyle: { color: '#323232' },
                  },
                },
                itemStyle: {
                  emphasis: {
                    borderWidth: 0.5,
                    borderColor: '#4b0082',
                    areaColor: '#ece39e',
                  },
                },
                // 文本位置修正
                textFixed: {
                  Alaska: [20, -20],
                },
                //data: seriesData
              },
            ],
          };

          that.$nextTick(() => {
            myChart2.setOption(option);
            myChart2.off('click');
          });
        }
      });
    },
    drawAlarmTypeAndLayer() {
      request({
        url: '/miniapp/ajaxAlarm',
        method: 'get',
      }).then((res) => {
        this.fauult_type = res.fauult_type;
        this.fauult_errortype = res.fauult_errortype;
        this.fault_chart2_data = res.fault_chart2_data;
        this.solution = res.solution;
        this.alarm_info_data = res.alarm_info_data;

        this.errortypeArr = res.fauult_errortype; //后台是同一个数据 这个的图用不到，实时报警采用的到

        console.log('ajaxAlarm', res);
        // 报警类型分析
        let fauult_type_data = this.fauult_type;
        let myTitleName = this.fauult_errortype;
        let fault_chart2_data = this.fault_chart2_data;
        for (let k = 0; k < fauult_type_data.length; k++) {
          let newDataName = fauult_type_data[k].error;
          let newDataVal = fauult_type_data[k].count;
          for (let j = 0; j < fault_chart2_data.length; j++) {
            if (fault_chart2_data[j].name == newDataName) {
              fault_chart2_data[j]['value'] = newDataVal;
            }
          }
        }

        let fault_type_chart2_option = {
          backgroundColor: '#00003b',
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
          },
          legend: {
            orient: 'horizontal',
            left: 10,
            bottom: 10,
            top: 0,
            data: Object.values(myTitleName),
            textStyle: {
              fontSize: '7',
            },
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['35%', '45%'],
              center: ['50%', '65%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  position: 'inner',
                  show: false,
                },
                formatter: '{per|{d}%}  ',
                backgroundColor: '#334455',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  per: {
                    fontSize: 10,
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2,
                  },
                },
              },
              data: fault_chart2_data,
            },
          ],
        };
        //画饼状图
        this.$nextTick(() => {
          echarts
            .init(document.getElementById('fault_type_chart2'), 'dark')
            .setOption(fault_type_chart2_option);
        });

        window.fauult_errortype = this.fauult_errortype;
        window.solution = this.solution;
        //弹窗，后面再说
        //未处理的报警设备信息
        this.dataList = Object.values(this.alarm_info_data);
        this.showwarning = true;

        // var alarm_info_data = arrayToAlarmFormat(
        //   this.alarm_info_data
        // );
        // alarm_info_popup(alarm_info_data);
      });
    },
    alarmInfoRealTime(){
      request({
        url:'/miniapp/ajaxAlarmInfoRealTime',
        method:'get'
      }).then((res)=>{
        this.alarm_info_data = res.alarm_info_data;
        let newdataList = Object.values(this.alarm_info_data);        
        if(this.dataList.length == 0) return
        if(this.dataList[0]['create_at'] !== newdataList[0]['create_at']){
          this.dataList = newdataList
          this.showwarning = true;

          //分两种弹出方式 到时候看看对方想要哪种
          this.$notify({
            title: '警告',
            message: "设备号【"+this.dataList[0]['deviceid']+"】在【"+this.dataList[0]['title']+"】发生了 【 "+this.fauult_errortype[this.dataList[0]['alarm_erro']]+" 】时间【"+this.dataList[0]['create_at']+"】",
            duration: 0,
            type: 'warning'
          });
        }else{
          console.log(this.dataList,'dataList')
          console.log('数据一样')
        }
      })
    },
    //用电汇总
    useTotal() {
      request({
        url: '/miniapp/ajaxUseTotal',
        method: 'get',
      }).then((res) => {
        this.monthTotal = res.monthTotal;
        this.dayTotal = res.dayTotal;
        this.sumtotal = res.sumtotal;
      });
    },
    realtimeAlarm() {
      request({
        url: '/miniapp/ajaxAlarmRealtime',
        method: 'get',
      }).then((res) => {
        this.alarminfo = res.alarminfo;
      });
    },
    project() {
      request({
        url: '/miniapp/ajaxProject',
        method: 'get',
      }).then((res) => {
        this.projectArr = res.projectArr;
      });
    },
    deviceAndProjectNum() {
      request({
        url: '/miniapp/ajaxNum',
        method: 'get',
      }).then((res) => {
        this.projectCount = res.projectCount; //项目总数
        this.deviceday = res.deviceday; //今日新增
        this.deviceyesday = res.deviceyesday; //昨日新增
        this.devices = res.devices; //设备总数量
      });
    },
  },
};
</script>

<style></style>
<style scoped lang="scss">
.container {
  background-color: rgba(0, 0, 59, 1);
  color: #fff;
  font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
}
.top_div {
  position: relative;
  height: 100px;
  background: url('/public/usermg/img/boardBg.98e74da8.png') no-repeat;
  background-size: auto;
  background-size: 100%;
  .go_center_btn {
    margin-top: 8px;
    margin-left: 10px;
    width: 100px;
    cursor: pointer;
    float: left;
    font-size: 16px;
  }
  .big_title {
    user-select: none;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    left: 50%;
    top: 30px;
    font-weight: 500;
    transform: translate(-50%, -50%);
  }
}
.body_content {
  .center {
    .map_center {
      width: 100%;
      height: 500px;
      text-align: center;
      position: relative;
      .title {
        color: #b6d7ff;
        font-size: 16px;
        display: inline-block;
      }
    }
    .real_fault_data {
      margin-top: 20px;
      font-size: 12px;
    }
    .form_data {
      margin-top: 10px;
    }
  }
  .left {
    .equ_code {
      position: relative;
    }
    .red_title {
      margin-top: 20px;
      position: absolute;
      top: 90px;
      left: calc(50% + 5px);
    }
    .blue_title {
      margin-top: 20px;
      position: absolute;
      top: 50px;
      left: calc(50% + 5px);
    }
    .equ_code_item {
      width: 50%;
      min-height: 163px;
    }
    .use_power {
      cursor: pointer;
      margin-top: 5px;
      margin-left: 3px;
      margin-right: 3px;
      display: flex;
      justify-content: space-around;
      div {
        text-align: center;
      }
    }
    .alarm_trend {
      .alarm_trend_chart {
        width: 100%;
        height: 300px;
      }
    }
  }
  .right {
    .mon_data {
      .measure_class {
        cursor: pointer;
        margin-left: 3px;
        margin-right: 3;
        display: flex;
        justify-content: space-around;
        div {
          margin: 10px -10px;

          text-align: center;
        }
      }
      .data_table {
        table {
          th {
            text-align: left;
            padding-left: 10px !important;
          }
        }
        tbody {
          tr {
            td {
              padding-left: 10px !important;
            }
          }
        }
        font-size: 12px;
        margin-top: 10px;
      }
    }
    .equ_code {
      .fault_type_chart {
        width: 100%;
        height: 350px;
      }
    }
  }
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .b-red {
    background-color: red;
  }
  .b-green {
    background-color: rgb(0, 189, 141);
  }
}

.col_35 {
  float: left;
  width: 30%;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col_5 {
  float: left;
  width: 40%;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.item_div {
  border: 1px solid rgba(0, 102, 153);
  border-radius: 4px;
  padding: 10px;
  margin: 10px -5px;
  .title {
    color: #b6d7ff;
    font-size: 16px;
    display: inline-block;
    img {
      width: 15px;
      vertical-align: middle;
    }
  }
}
.bor_b_das_103083 {
  border-bottom: 1px dashed #103083;
}
.fs_18px {
  font-size: 18px;
}
.color_20fdfa {
  color: #20fdfa;
}
.clear::after {
  content: '';
  display: block;
  clear: both;
}
table {
  font-size: 13px;
  border-collapse: collapse;
  border-spacing: 0;
}
table.table_outer_frame {
  border: 1px solid #1e7ea9;
  thead {
    tr {
      th {
        border-bottom: 2px solid #1e7ea9;
        background-color: #1f336c;
      }
    }
  }
  tbody {
    tr {
      td {
        border-top: 1px solid #1e7ea9;
      }
    }
  }
}
.table-condensed {
  thead {
    tr {
      th {
        padding: 5px 3px;
      }
    }
  }
  tbody {
    tr {
      td {
        padding: 5px 3px;
      }
    }
  }
}
.pages {
  text-align: center;
  padding: 5px;
  &:first-child {
    border: 0;
    background-color: transparent;
    color: #fff;
  }
}
</style>
